<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <style>
    /* .change{
    width: 100px;
    line-height: 100px;
    background-color: tomato;
    color: #fff;
    text-align: center;
    transition: all 1s;
    } */

    *{
        margin: 0;
        padding: 0;
    }    

    body{
        margin: 10px;

    }

    div{
        width: 200px;
        height: 100px;
        border: 1px dashed #ccc;
        margin-bottom: 10px;
    }

    .changeStyle{
        width: 200px;
        height: 150px;
        background-color: tomato;
    }


    .bold-text{
        font-size: 30px;
        font-weight: 700;
    }

    #carousel{
        width: 200px;
        height: 200px;
        position: relative;
    }

    #carousel li{
        width: 200px;
        line-height: 200px;
        /* border-radius: 50%; */
        position: absolute;
        text-align: center;
        justify-content: center;
        text-shadow: 0 0 5px #000;
        font-size: 35px;
        color: #fff;
        opacity: 0;
        transition: opacity 1s;

    }

    #carousel li:nth-child(1){
        background-color: orange; 
        
    }

    #carousel li:nth-child(2){
        background-color: red;
    }

    #carousel li:nth-child(3){
        background-color: grey;
    }

    #carousel li.active{
        opacity: 1;
    }

    button{
        width: 30px;
        height: 30px;
        border: 5px;
        position: relative;
        
    }





    </style>
</head>
<body>
    <!-- <div id="box">默认文本</div> -->
    <script>
        //这里实现的功能是点击“默认文本”之后会有新的内容和视觉效果的变化
        //box.onclick = function(){
            //this.innerText = '新的内容'
            //this.className = 'change'
        //}
    </script>
    <!--在此引入JS程序-->
    <!-- <script src="./index.js"></script> -->

    <!--Dom文档对象模型 Bom浏览器对象模型-->
    <!--有了Dom和Bom，可以对网页中的标签进行操作-->

    <div id='block'>默认文本</div>
    <!--用JS设置轮播图-->
    <ul id = 'carousel'>
        <li class = 'active'>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <button id="prev">
        <svg style="transform:rotate(180deg);" viewBox="0 0 1024 1024">
        <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067" stroke="currentColor" d="m341.333 170.667 341.334 341.332-341.334 341.335"></path>
      </svg>
    </button>
    <button id ='next'>
        <svg viewBox="0 0 1024 1024">
        <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067" stroke="currentColor" d="m341.333 170.667 341.334 341.332-341.334 341.335"></path>
      </svg>
    </button>
    
    <!-- <div id="container">
        <p>默认内容</p>
        <p class="item">默认内容</p>
        <p class="item">默认内容</p>
        <p>默认内容</p>
    </div> -->

    <script>
        //1.JS对文本的基本处理
        // var block = document.getElementById('block')//通过ID设置获取标签
        // console.log(block)
        // block.textContent = '使用JS通过ID设置的文本'


        // //var content = document.getElementsByTagName('p')
        // //var content = document.querySelectorAll('p')
        // //var content = document.querySelectorAll('.text')//可以实现的效果都一样，但后者这种的可以更灵活地运用
        // var content = document.querySelectorAll('#container p')//和CSS选择器比较类似的用法
        // console.log(content)
        // //content[0].textContent = '使用JS通过标签设置的第一个文本'

        // var textArr = [
        //     'JS设置的第一条内容',
        //     'JS设置的第二条内容',
        //     'JS设置的第三条内容',
        //     'JS设置的第四条内容'
        // ]
        // for(i = 0; i < content.length ; i++){
        //     //content[i].textContent = '新的内容'

        //     content[i].textContent = textArr[i] //根据标签来对应生成内容
        // }


        // //用于对单个元素的替换之类的
        // var secondItem = document.querySelector('.item')//只会对匹配到的第一个标签进行处理
        // secondItem.textContent = '第二条内容是JS设置的'
        // //可以基于第二个p标签的相邻标签去实现元素的替换，这里是同级标签的访问
        // secondItem.previousElementSibling.textContent = '第一条内容也是JS设置的'
        // secondItem.nextElementSibling.textContent ='第三条内容也可以是JS设置的'

        // //对上级标签的获取
        // var container = secondItem.parentNode
        // console.log(container)
        // //container.textContent ='新内容'

        // //对下级标签的获取
        // var items = container.childNodes
        // console.log(items)

        // //可以根据标签、ID或类名来获取，还可以利用元素和元素之间的关系来获取其他的元素

        

        //2.JS对样式的处理
        // var block = document.querySelector('#block')
        // block.style.width = "150px";
        // block.style.height = "200px";
        // block.style.backgroundColor = "tomato"
        //使用JS和CSS都可以去设置样式，但一般都使用CSS

        //block.className = 'changeStyle'//用JS使用类名的方法来调整样式



        //3.JS对文本的处理
        block.innerHTML = '区别内容<span class = "bold-text">加粗的文本</span>'
        //innerHTML和textContent的区别在于前者可以生成标签，而后者只能设置纯文本


        //4.JS的事件处理，使用到的最多的功能
        // block.onclick = function(){
        //     alert('suprise!')
        // }

        // block.onclick = function(){
        //     alert('suprise again!')
        // }//用onClick的话，在第二次点击的时候会被覆盖，没法实现相应的功能


        block.addEventListener('click',function(){
            alert('suprise!')
        })

        block.addEventListener('click',function(){
            alert('suprise again!')
        })//用addEventListener可以避免覆盖的问题




        //轮播图部分
        var carousel = document.querySelector('#carousel')
        var items = carousel.children
        //console.log(items)
        var prevBtn = document.querySelector('#prev')
        var nextBtn = document.querySelector('#next')

        //这里是向下翻页部分
        index = 0;
        nextBtn.addEventListener('click',function(){
            items[index].className = ''
            if(index === items.length - 1){
                index = -1
            }

            index ++
            items[index].className = 'active'
        })

        //这里是向上翻页部分
        prevBtn.addEventListener('click',function(){
            items[index].className = ''
            if(index === 0){
                index = items.length
            }

            index --
            items[index].className = 'active'


        })


        //5.定时器

        // setTimeout(function()  {
        //    console.log('suprise!') 
        // }, 2000);//2000毫秒后执行

        var timer = setInterval(function()  {
           console.log('这个会间隔2秒执行一次!') 
        }, 2000);

        setTimeout(function()  {
            clearInterval(timer)
        }, 6000);


        setInterval(function()  {
             items[index].className = ''
             if(index === items.length - 1){
                 index = -1
             }

             index ++
             items[index].className = 'active'
         }, 3000);//自动播放轮播图











        
    </script>

</body>
</html>